<template>
  <div>
    <h1>用户管理</h1>
    <TsCard>
      <template v-slot="scope">
        <h3>default slot</h3>
        {{ scope }}
      </template>
      <!-- <template v-slot:default="scope">
        <h3>default slot</h3>
        {{ scope }}
      </template> -->
      <!-- <template v-slot:a="scope">
        <h3>A slot</h3>
        {{ scope }}
      </template> -->
      <template #a="scope">
        <h3>A slot</h3>
        {{ scope }}
      </template>
      <template v-slot:b="{ email, phone }">
        <!-- const {email,phone} = scope -->
        <h3>B slot</h3>
        {{ email }}
        <hr>
        {{ phone }}
      </template>
      <template v-slot:[sname]="scope">
        <h3>C slot</h3>
      </template>
    </TsCard>
    <TsCard></TsCard>
  </div>
</template>
<script>
import TsCard from './components/TsCard.vue';
export default {
  components: {
    TsCard
  },
  data() {
    return {
      sname: 'c',
      content: 'this is jack'
    }
  }

}
</script>
<style>
div {
  border: solid;
  padding: 10px;
  margin: 10px;
}
</style>